<template>

    <top-nav></top-nav>

    <div>
        TEST后台
    </div>

    <div>
        <button @click="logOut">退出登录</button>
        <button @click="uploadBlog">添加文章</button>
    </div>

    <div>
        <n-grid x-gap="12" :cols="4">
            <n-gi v-for="(item, index) in blog.list" :key="index">
                <n-card :title="item.blog_title" class="blog-card">
                    <template #cover>
                        <!-- <img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"> -->
                    </template>
                    {{ item.blog_abstract }}
                    <template #action>
                        <button @click="editBlog(item.blog_id)">编辑</button>
                        <button @click="deleteBlog(item.blog_id)">删除</button>
                        <button @click="toBlogDetail(item.blog_id)">查看</button>
                    </template>
                </n-card>
            </n-gi>
        </n-grid>
    </div>

    <div>
        底部
    </div>

</template>

<script setup>
import { inject, onMounted, onUpdated, reactive, onBeforeUnmount, onUnmounted, onBeforeMount } from 'vue'
import { useRouter } from "vue-router"
import { storeToRefs } from "pinia";
import { epStore } from "../common/store.js";
import { NCard, NGi, NGrid, NDivider } from "naive-ui"
import TopNav from "./TopNav.vue"

const axios = inject("axios")
const router = useRouter()
const store_data = epStore()
// let { user_account } = storeToRefs(store_data)

const blog = reactive({
    list: ""
})

const logOut = async () => {
    // 清除用户本地数据
    // token.value = ""
    store_data.user_account = ""
    localStorage.removeItem('USER_ACCOUNT')
    localStorage.removeItem('TOKEN')
    localStorage.removeItem('LOGIN');
    await router.push("/login")
}


const getBlogs = async () => {

    // token = localStorage.getItem('TOKEN')  // 为何不可直接获取???
    // console.log(store_data.getToken);  // 使用计算属性获取TOKEN！
    let headers = {
        'authorization': store_data.getToken || store_data.token
    }
    let res_data = await axios.post(
        "/blog/user",
        "",
        { headers: headers }
    )
    blog.list = res_data.data
}

const editBlog = async (blog_id) => {
    // await router.push(`/detail?blog_id=${blog_id}`)
    await router.push({
        path: "/blog-editor",
        query: {
            blog_id: blog_id
        }
    })
}


const deleteBlog = async (blog_id) => {

    let headers = {
        'Authorization': store_data.getToken || store_data.token
    }
    let res_msg = await axios.delete(
        `/blog/delete?blog_id=${blog_id}`,
        "",
        { headers: headers }
    )
    console.log(res_msg);  // 提示消息
    getBlogs()
}


const toBlogDetail = async (blog_id) => {
    // console.log(blog_id);
    await router.push(`/detail?blog_id=${blog_id}`)
}

const uploadBlog = async () => {

    // 到富文本编辑器
    await router.push({
        path: "/blog-editor",
    })
}

onMounted(() => {
    // 刷新后重定向
    if (!localStorage.getItem("TOKEN") && localStorage.getItem("LOGIN")) {
        // console.log(1);
        window.onbeforeunload = function (e) {
            if (router.currentRoute._rawValue.fullPath === "/panel") {
                e = e || window.event;
                // 兼容IE8和Firefox 4之前的版本
                if (e) {
                    e.returnValue = '关闭提示';
                }
                localStorage.removeItem('LOGIN');
                localStorage.removeItem('USER_ACCOUNT');
                // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
                return '关闭提示';
            } else {
                window.onbeforeunload = null
            }
        }
    }
    if (!localStorage.getItem("LOGIN")) {
        router.push("/login")
    }
    getBlogs()
})

onUnmounted(() => {
    window.onbeforeunload = null
    // // router.push("/login")
})

</script>

<style lang="scss" scoped>

</style>